<template>
  <div class="product-container">
    <div class="main-content">
      <!-- 左侧商品图片区域 -->
      <div class="product-gallery">
        <img :src="productDetail.mainImage" :alt="productDetail.name" class="main-image">
        <div class="thumbnail-list">
          <img v-for="(image, index) in productDetail.images"
               :key="index"
               :src="image"
               @click="changeMainImage(image)"
               class="thumbnail">
        </div>
      </div>

      <!-- 右侧固定购买区域 -->
      <div class="purchase-sticky">
        <h1 class="item-name">{{ productDetail.name }}</h1>

        <div class="price-section">
          <span class="current-price">¥{{ (productDetail.price / 100).toFixed(2) }}</span>
          <span class="original-price" v-if="productDetail.originalPrice">
            ¥{{ (productDetail.originalPrice / 100).toFixed(2) }}
          </span>
        </div>

        <div class="item-description">
          <p>{{ productDetail.description }}</p>
        </div>

        <!-- 规格选择 -->
        <div class="item-specs">
          <div class="spec-group" v-for="(spec, key) in productDetail.specs" :key="key">
            <h3>{{ key }}</h3>
            <div class="spec-options">
              <span v-for="option in spec"
                    :key="option"
                    :class="['spec-option', { active: selectedSpecs[key] === option }]"
                    @click="selectSpec(key, option)">
                {{ option }}
              </span>
            </div>
          </div>
        </div>

        <div class="quantity-control">
          <span>数量</span>
          <div class="quantity-actions">
            <button @click="decreaseQty" :disabled="quantity <= 1">-</button>
            <input type="number" v-model.number="quantity" min="1" :max="productDetail.num">
            <button @click="increaseQty" :disabled="quantity >= productDetail.num">+</button>
          </div>
        </div>

        <div class="action-buttons">
          <button class="btn-buy" @click="handleBuyNow" :disabled="!productDetail.num">
            立即购买
          </button>
          <button class="btn-cart" @click="handleAddToCart" :disabled="!productDetail.num">
            加入购物车
          </button>
          <button class="btn-service" @click="showChat = true">
            联系客服
          </button>
        </div>
      </div>
    </div>

    <!-- 评价区域 -->
    <div class="reviews-section">
      <div class="reviews-header">
        <h2>用户评价</h2>
        <div class="reviews-tabs">
          <span class="tab active">全部(3000+)</span>
          <span class="tab">有图/视频(56)</span>
          <span class="tab">追评(3)</span>
          <div class="sort-dropdown">
            默认排序 <i class="el-icon-arrow-down"></i>
          </div>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="review-list">
        <div v-for="review in reviews" :key="review.id" class="review-item">
          <div class="reviewer-info">
            <img :src="review.avatar" class="avatar">
            <span class="name">{{ review.name }}</span>
            <span class="date">{{ review.date }}</span>
          </div>
          <!-- 评分 -->
          <div class="review-rating">
            <span v-for="star in 5"
                  :key="star"
                  class="star"
                  :class="{ active: star <= review.rating }"
                  @click="rateReview(review.id, star)">
              ★
            </span>
          </div>
          <div class="review-content">{{ review.content }}</div>
          <div v-if="review.images" class="review-images">
            <img v-for="(img, index) in review.images"
                 :key="index"
                 :src="img"
                 class="review-image">
          </div>
          <div class="review-footer">
            <span class="helpful">
              <i class="el-icon-triangle-up"></i>
              有用({{ review.helpful }})
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 聊天框组件 -->
    <Chat v-if="showChat" @close="showChat = false" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Chat from './components/Chat.vue' // 引入 Chat 组件

const quantity = ref(1)
const selectedSpecs = ref({})
const showChat = ref(false) // 控制聊天框显示

const productDetail = ref({
  price: 0,
  num: 0,
  name: '',
  description: '',
  mainImage: '',
  images: [],
  specs: {
    颜色: ['红色', '蓝色', '黑色'],
    尺寸: ['S', 'M', 'L', 'XL']
  }
})

const reviews = ref([
  {
    id: 1,
    name: 'z**2',
    date: '2024-11-14',
    content: '包包很好，款式不错，简洁大方，有很多小袋，还有内层的笔记本隔层，真的很实用。表明上有一个痕迹，可以装一些小东西，很适合热爱周边的学生',
    images: ['/image1.jpg', '/image2.jpg', '/image3.jpg', '/image4.jpg'],
    helpful: 1,
    rating: 4 // 添加评分字段
  },
  {
    id: 2,
    name: '匿名用户',
    date: '2024-11-15',
    content: '质量很好，物流很快，非常满意！',
    images: [],
    helpful: 0,
    rating: 5 // 添加评分字段
  }
])

function changeMainImage (image) {
  productDetail.value.mainImage = image
}

function selectSpec (key, option) {
  selectedSpecs.value[key] = option
}

function decreaseQty () {
  if (quantity.value > 1) quantity.value--
}

function increaseQty () {
  if (quantity.value < productDetail.value.num) quantity.value++
}

function handleAddToCart () {
  console.log('添加到购物车:', {
    item: productDetail.value.id,
    specs: selectedSpecs.value,
    quantity: quantity.value
  })
}

function handleBuyNow () {
  console.log('立即购买:', {
    item: productDetail.value.id,
    specs: selectedSpecs.value,
    quantity: quantity.value
  })
}

function rateReview (reviewId, rating) {
  const review = reviews.value.find(r => r.id === reviewId)
  if (review) {
    review.rating = rating
  }
}
</script>
<style scoped>
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.main-content {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.product-gallery {
  flex: 1;
}

.main-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
}

.thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #ddd;
}

.thumbnail:hover {
  border-color: #666;
}

.purchase-sticky {
  width: 400px !important;
  height: 420px !important;
  position: sticky;
  top: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.item-name {
  font-size: 20px;
  margin-bottom: 15px;
}

.price-section {
  background: #fff2e8;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.current-price {
  font-size: 24px;
  color: #ff4400;
  font-weight: bold;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}

.item-specs {
  margin: 15px 0;
}

.spec-group {
  margin-bottom: 10px;
}

.spec-group h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.spec-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spec-option {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.spec-option.active {
  border-color: #ff4400;
  color: #ff4400;
}

.quantity-control {
  margin: 15px 0;
}

.quantity-actions {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.quantity-actions button {
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.quantity-actions input {
  width: 50px;
  height: 28px;
  text-align: center;
  border: 1px solid #ddd;
  margin: 0 -1px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.btn-buy, .btn-cart {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-buy {
  background: #ff4400;
  color: white;
}

.btn-cart {
  background: #ffd591;
  color: #333;
}

.reviews-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.reviews-header {
  margin-bottom: 20px;
}

.reviews-tabs {
  display: flex;
  align-items: center;
  margin: 15px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.tab {
  margin-right: 20px;
  cursor: pointer;
  color: #666;
}

.tab.active {
  color: #333;
  font-weight: bold;
}

.sort-dropdown {
  margin-left: auto;
  color: #666;
  cursor: pointer;
}

.review-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.review-images {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.review-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.item-description {
  color: #666;
  font-size: 14px;
  margin: 10px 0;
  line-height: 1.5;
}
</style>
